<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
    <!DOCTYPE html>
    <html>
    <head>
        <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
        <style>
            .input-text {
                height: 32px;
                line-height: 32px;
                -webkit-appearance: none;
                background-color: #FFF;
                background-image: none;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: #606266;
                display: inline-block;
                font-size: inherit;
                outline: 0;
                padding: 0 15px;
                -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                width: 100%;
            }

            .input-text:focus {
                border-color: #409EFF;
                outline: 0;
            }
        </style>
    </head>
    <body>
    <div class="mainpage list">
        <!--顶部菜单-->
        <div class="page-topmenu">
         <shiro:hasPermission name="newsInfo:add">
            <div class="btn-panel">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="add">添加</el-button>
            </div>
          </shiro:hasPermission>
           <shiro:hasPermission name="newsInfo:del">
            <div class="btn-panel">
                <el-button size="small" icon="el-icon-delete" @click="del">删除</el-button>
            </div>
            </shiro:hasPermission>
        </div>
        <!--查询条件-->
        <el-form :inline="true" :model="form" size="small">
            <!--视业务进行更改-begin-->
            <el-form-item label="标题:">
                <%--<el-input v-model="form.title" placeholder="标题"></el-input>--%>
                <input class="input-text" v-model="form.title"  placeholder="标题"></input>
            </el-form-item>
            <el-form-item label="起始日期" prop="startTime">
                <el-date-picker
                        v-model="form.startTime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="起始日期"
                        default-time="00:00:00" style="width: 100%;"
                        :picker-options="start_Date"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endTime">
                <el-date-picker
                        v-model="form.endTime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="结束显示时间"
                        default-time="23:59:59" style="width: 100%;"
                        :picker-options="end_Date"
                >
                </el-date-picker>
            </el-form-item>
            <!--视业务进行更改-end-->
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <hr/>
        <el-table
                row-key="id"
                :data="grid.data"
                :height="grid.height"
                @selection-change="selectchange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="name" label="操作" width="100">
                <template slot-scope="scope">
                    <a @click="goedit(scope.row.id)" class="grid-operate">编辑</a>
                </template>
            </el-table-column>
            <!--视业务进行更改-begin-->
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间"></el-table-column>
            <el-table-column prop="image" label="图片">
                <template slot-scope="scope">
                    <el-popover placement="right" title="" trigger="hover">
                        <img :src="scope.row.image" style="max-height: 100px;max-width: 200px"/>
                        <img slot="reference" :src="scope.row.image" :alt="scope.row.image" style="max-height: 50px;max-width: 130px">
                    </el-popover>
                </template>
            </el-table-column>
            <!--视业务进行更改-end-->
        </el-table>
        <!--分页控件-->
        <%@include file="/WEB-INF/views/layout/miiteen/gridpage.ref.jsp" %>
    </div>
    <script>
        //初始化数据，必须放置在列表页面封装部分前
        function initVueOption(obj) {
            //设置控制器
            obj.data.controller = "${ctx}/news/newsinfo";
            //设置查询条件默认值
            obj.data.form = {
            }
            //限制时间=====================begin===============================
            obj.data.start_Date={
                disabledDate:function(time) {
                    if(obj.data.form.endTime){
                        var dateTime=obj.data.form.endTime;
                        dateTime=dateTime.replace(new RegExp("-","gm"),"/");
                        return  time.getTime() >(new Date(dateTime)).getTime();//如果没有后面的-8.64e7就是不可以选择今天的
                    }
                }
            }
            obj.data.end_Date={
                disabledDate:function(time) {
                    if(obj.data.form.startTime){
                        var dateTime=obj.data.form.startTime;
                        dateTime=dateTime.replace(new RegExp("-","gm"),"/");
                        return time.getTime() <(new Date(dateTime)).getTime();
                    }
                }
            }
            //限制时间=====================end=================================
        }
    </script>
    <!--列表页面封装部分-->
    <%@include file="/WEB-INF/views/layout/miiteen/page.list.ref.jsp" %>
    </body>
    </html>